<template>
	<z-paging ref="paging" v-model="indexList" @query="queryList"  safe-area-inset-bottom use-safe-area-placeholder :loading-more-enabled="false" :refresher-enabled = "false" :auto="false">
		<template slot="top">
			<cl-navbar autoBack placeholder :title="$t('addressbook.add_friend.title')"></cl-navbar>
			<view class="searchview">
				<u-search :showAction="true" height="64rpx" v-model="searchval" :clearabled="false" searchIconColor="#61626E"
					searchIconSize="40rpx" :actionText="$t('commonality.search')" bgColor="#1e1f30" placeholder=""
					:actionStyle="{ color: '#61626E', fontSize: '26rpx' }" @custom="search" @search="search"></u-search>
			</view>
		</template>
			
		<view :key="index" v-for="(item, index) in indexList" @click="godetails(item)">
			<view class="listitem">
				<view class="listitem__left">
					<cl-avatar :src="item.avatar_url" size="100rpx" :key="item.avatar_url"></cl-avatar>
				</view>
				<view class="listitem__right">
					<view class="listitem__right__top">
						<text class="listitem__right__top__nickname">{{item.nick_name}}</text>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import friendsApi from "@/services/api/friends.js"
	export default {
		name: 'addFriend',
		data() {
			return {
				searchval:'',
				indexList: []
			}
		},
		onLoad() {
			// 监听操作
			uni.$on('onMessageFriendApp', this.onMessageFriendApp)
		},
		onUnload() {
			uni.$off('onMessageFriendApp', this.onMessageFriendApp)
		},
		methods: {
			onMessageFriendApp({type,data}){
				if(this.indexList.length && type == 'accepted'){
					//如果别人通过了我，或者我通过了别人，改一下好友状态
					if(data.recipient_id == this.indexList[0].user_id || data.requester_id == this.indexList[0].user_id){
						this.$set(this.indexList[0],'is_friend',1)
					}
				}
			},
			async search(){
				try{
					let res = await friendsApi.userNoFriendInfo(this.searchval)
					if(res){
						this.$refs.paging.complete(res)
					}else{
						this.$refs.paging.complete(false)
					}
				}catch(e){
					this.$refs.paging.complete(false)
				}
			},
			godetails(item){
				console.log(item);
				if(item.is_friend){
					this.$Router.push({
						name: 'friend_details',
						params: {
							friend_idx:item.user_id,
							nick_name:item.nick_name,
							friend_remark:'',
							avatar_url:item.avatar_url
						}
					});
				}else{
					this.$Router.push({
						name: 'add_friend_details',
						params: item
					});
				}
			},
			
			queryList(pageNo, pageSize) {
				this.search()
			}
		},
	};
</script>

<style scoped lang="scss">
	.searchview {
		margin: 20rpx 30rpx;
		background-color: #1e1f30;
		border-radius: 60rpx;
		padding-right: 20rpx;
	}
		.listitem {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;
	
			&.active {
				background-color: #1E1F30;
			}
	
			&__right {
				margin-left: 20rpx;
				flex: 1;
	
				&__top {
					display: flex;
					justify-content: space-between;
					align-items: center;
	
					&__nickname {
						color: #fff;
						font-size: 28rpx;
					}
	
					&__time {
						color: #61626E;
						font-size: 20rpx;
					}
				}
	
				&__content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 15rpx;
	
					&__msg {
						flex: 1;
						font-size: 24rpx;
						color: #595A66;
					}
				}
			}
		}
</style>